<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
    <meta name="HandheldFriendly" content="true" />
    <link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
    <script src="jquery-2.1.1.min.js"></script>
    <script src="jquery.mobile-1.4.3.min.js"></script>
    <script type="text/javascript">
        function queryResult(tx, result) {
            try {
                var rowList = result.rows;
                if (rowList.length) {
                    alert('登录成功');
                    self.location = 'index.html';
                } else alert('fail to login! 登录失败！');
            } catch (err) {
                alert(err.message ? err.message : err.toString());
            }

        }

        function queryError(tx, err) {

            alert(err.message ? err.message : err.toString());
        }

        function callback(tx) {
            var sql;
            sql = "CREATE TABLE IF NOT EXISTS user(username TEXT,password TEXT)";
            tx.executeSql(sql);
            sql = "SELECT * FROM user";
            tx.executeSql(sql, [], queryResult_1, queryError);
        }

        try {

            var db = window.openDatabase('database', '1.0', ' 我的数据库', '2*1024*1024');
        } catch (err) {

            alert(err.message ? err.message : err.toString());

        }

        if (!db) alert("不能连接到数据库！");
        db.transaction(callback);


        function queryResult_1(tx, result) {
            try {
                var rowList = result.rows;
                if (rowList.length) {
                    alert('数据库用户信息已经存在');
                } else {
                    alert('用户信息不存在，自动写入');
                    sql = "INSERT INTO user(username,password) VALUES('admin','admin')";
                    tx.executeSql(sql);

                }
            } catch (err) {
                alert(err.message ? err.message : err.toString());
            }

        }




        function check(tx) {
            var name = document.getElementById('name').value;
            var psw = document.getElementById('password').value;

            sql = "SELECT * FROM user WHERE username='" + name + "' AND password='" + psw + "'";
            tx.executeSql(sql, [], queryResult, queryError);
        }

        function onff() {

            db.transaction(check);

        }

        function register() {

            self.location = 'register.html';
        }
    </script>


    <title></title>
</head>
<style>
    * {
        font-size: 20px;
        margin: 0px;
        padding: 0px;
    }
    
    .warpper {
        width: 1200px;
        margin: 0 auto;
    }
    
    .warpper .dengru h1 {
        text-align: center;
    }
    
    .xiushi input {
        width: 100px;
        height: 20px;
        text-align: center;
        border-color: rgb(83, 73, 73);
        margin-bottom: 5px;
        border-color: antiquewhite;
        box-shadow: 1px 4px 5px;
        border: 3px solid;
    }
    
    .xiushi input:hover {
        color: aquamarine;
    }
    
    .anniu input {
        color: #000;
        background-color: rgb(0, 255, 229);
        float: right;
        margin-right: 40px;
        transition: all 0.5s;
    }
    
    .anniu input:hover {
        border-radius: 20px;
        border: 3.3px solid #000;
    }
    
    .xiushi {
        margin-top: 50px;
        text-align: center;
    }
    
    .anniucenter {
        position: relative;
        left: -453px;
        margin-top: 35px;
    }
    
    .main {
        margin-top: 200px;
    }
</style>

<body>
    <div class="main">
        <div data-role="page " class="warpper">

            <div data-role="header" class="dengru">
                <h1>登陆</h1>
            </div>
            <div data-role="content " class="content">

                <form action="#">
                    <div data-role="fieldcontain" class="xiushi ">
                        <label for="name">用户名 ：</label>

                        <input class="biaoge" name="username" type="text" id="name" value="" /></div>
                    <div data-role="fieldcontain" class="xiushi warpper ">
                        <label for="textarea">密 码&nbsp ：</label>
                        <input name="password" type="text" id="password" /></div>

                    <div class="anniucenter ">
                        <div data-role="fieldcontain" class="  anniu">
                            <input name="login" type="button" value="登录" onClick="onff()" /></div>
                        <div data-role="fieldcontain" class="  anniu">
                            <input name="login" type="button" value="注册" onClick="register()" /></div>
                        <div data-role="fieldcontain" class=" anniu">
                            <input name="reset" type="reset" value="重置" />
                        </div>
                    </div>

            </div>
            </form>
        </div>

    </div>

    </div>


</body>

</html>